<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>Blog管理系统-文章修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    @include('admin.public.style')
    @include('admin.public.script')
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form" empty="multipart/form-data" id="art_form" method="post">
          <div class="layui-block layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-inline">
              <select name="cate_id" lay-verify="required" lay-search="">
                <option value="0">--顶级类目--</option>
                @foreach($cates as $k => $v)
                <option value="{{$v->id}}" @if($v->id == $article->cate_id) selected="" @endif>{{$v->cate_name}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">文章标题</label>
              <div class="layui-input-inline">
                  <input type="text" id="L_username" name="art_title" required="" lay-verify="required" value="{{$article->art_title}}" 
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">编辑</label>
              <div class="layui-input-inline">
                  <input type="text" id="L_username" name="art_editor" required="" lay-verify="requirede" value="{{$user}}" autocomplete="off" class="layui-input layui-disabled" disabled="">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">缩略图</label>
              <div class="layui-upload">
                <input type="hidden" name="art_thumb" value="" id="img1" value="{{$article->art_thumb}}">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <input type="file" name="photo" id="photo_upload" style="display: none;">
                <!-- <div class="layui-upload-list">
                  <img class="layui-upload-img" id="demo1">
                </div> -->
              </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
              <img src="{{$article->art_thumb}}" alt="" id="art_thumb_img" style="width: 100px;height: 100px;">
            </div>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">关键词</label>
              <div class="layui-input-inline">
                  <input type="text" id="L_username" name="art_tag" required="" lay-verify="required" value="{{$article->art_tag}}"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">描述</label>
              <div class="layui-input-block">
                  <textarea placeholder="请输入内容" class="layui-textarea" name="art_description">{{$article->art_description}}</textarea>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">内容</label>
              <div class="layui-input-block">
                  <!-- 配置文件 -->
                  <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
                  <!-- 编辑器源码文件 -->
                  <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
                  <!-- 编辑器语言包 -->
                  <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
                  <!-- 加载编辑器的容器 -->
                  <script type="text/plain" style="height:500px;" name="art_content" id="container">
                     {!!$article->art_content!!}
                  </script>
                  <!-- 实例化编辑器 -->
                  <script>
                    var ue = UE.getEditor('container');
                  </script>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <input type="hidden" name="id" value="{{$article->id}}">
              <button  class="layui-btn" lay-filter="edit" lay-submit="">
                  修改
              </button>
          </div>
      </form>
    </div>
    <script>
        layui.use(['form','layer'], function(){
          $ = layui.jquery;
          var form = layui.form,
              layer = layui.layer,
              upload = layui.upload;
        
          $('#test1').on('click',function(){
            $('#photo_upload').trigger('click');
            $('#photo_upload').on('change',function(){
              var obj = this;
              var formData = new FormData($('#art_form')[0]);
              $.ajax({
                url:'/admin/article/upload',
                type:'POST',
                headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data:formData,
                processData:false,
                contentType:false,
                success:function(data){
                  if(data['ServerNo']=='200'){
                    $('#art_thumb_img').attr('src','/uploads/'+data['ResultData']);
                    $('#img1').val('/uploads/'+data['ResultData']);
                    $(obj).off('change');
                  }else{
                    alert(data['ResultData']);
                  }
                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
                  var number = XMLHttpRequest.status;
                  var info = "错误号"+number+"文件上传失败！";
                  alert(info);
                },
                async:true
              });
            });
          })

          //自定义验证规则
          form.verify({
            // 
          });

          //监听提交
          form.on('submit(edit)', function(data){
            // console.log(data);
            var aid = $("input[name='id']").val();

            $.ajax({
              type:'put',
              url:'/admin/article/'+aid,
              dataType:'json',
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              data:data.field,
              success:function(data){
                // 提示
                // console.log(data);
                if (data.status == 0) {
                  layer.alert(data.message,{icon:6},function(){
                    parent.location.reload(true);
                  })
                }else{
                  layer.alert(data.message,{icon:5})
                }
              },
              error:function(){
                // 提示
              }
            })

            //发异步，把数据提交给php
            // layer.alert("增加成功", {icon: 6},function () {
            //     // 获得frame索引
            //     var index = parent.layer.getFrameIndex(window.name);
            //     //关闭当前frame
            //     parent.layer.close(index);
            // });
            return false;
          });
          
          
        });
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>